<template>
	<view class="identity" :style="{ height: wh + 'px' }">
		<image class="bg" src="/static/images/identity-bg.png" mode="widthFix"></image>
		<view class="title">请选择您的角色</view>
		<view class="body">
			<view :class="['item',{current:index===currentIndex}]" v-for="(item,index) in opetion" :key="item.title"
				@click="selectIdentity(item,index)">
				<image class="avatar" :src="item.path"></image>
				<view class="item-title" v-text="item.title"></view>
				<u-icon v-if="currentIndex===index" name="checkmark" color="#5A86E0"></u-icon>
			</view>
		</view>
	</view>
</template>

<script>
	
	export default {
		data() {
			return {
				wh: 0,
				opetion: [{
					path: "/static/images/student.png",
					title: '学生'
				}, {
					path: "/static/images/teacher.png",
					title: '教师'
				}],
				currentIndex: null,
			};
		},
		onLoad() {
			const sysInfo = uni.getSystemInfoSync()
			this.wh = sysInfo.windowHeight
		},
		methods: {
			selectIdentity(item, index) {
				this.currentIndex = index
				uni.showModal({
					title: '提示',
					content: '您当前选择身份是' + item.title,
					success: function(res) {
						if (res.confirm) {
							uni.switchTab({
								url: "/pages/home/home"
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	.identity {
		width: 100%;

		.bg {
			margin-top: -176rpx;
			width: 100%;
		}

		.title {
			font-size: 22px;
			margin-top: -200rpx;
			margin-left: 136rpx;
		}

		.body {
			padding-top: 200rpx;
			height: 100%;
			background-color: #f9f9f9;

			.item {
				position: relative;
				left: 50%;
				transform: translateX(-50%);
				width: 590rpx;
				height: 312rpx;
				margin-bottom: 32rpx;
				box-shadow: 2rpx 2rpx 10rpx rgba(119, 119, 119, 0.06);
				background-color: #fff;
				border-radius: 8rpx;

				&.current {
					border: 4rpx solid #5A86E0;
				}

				.avatar {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -60%);
					width: 136rpx;
					height: 136rpx;
				}

				.item-title {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, 160%);
					font-size: 16px;
				}

				.u-icon {
					position: absolute;
					top: 12rpx;
					right: 10rpx;
				}
			}
		}
	}
</style>
